<template>
  <BasicModal
    v-bind="$attrs"
    :width="500"
    :title="getTitle"
    :canFullscreen="false"
    :centered="true"
    :destroyOnClose="true"
    :maskClosable="false"
    @register="registerModal"
    @ok="handleSubmit"
  >
    <BasicForm @register="registerForm"></BasicForm>
  </BasicModal>
</template>
<script lang="ts" name="AccountModal" setup>
import { computed, ref, unref, h } from "vue";
import { BasicModal, useModalInner } from "/@/components/Modal";
import { BasicForm, useForm } from "/@/components/Form/index";
import { accountSchema } from "./business.data";
import { accountSave, accountById, coopSelect } from "./business.api";
import { useMessage } from "/@/hooks/web/useMessage";

const { createMessage: $message } = useMessage();
const isUpdate = ref(false);
const getTitle = computed(() => (!unref(isUpdate) ? '收支项目 - 新增' : '收支项目 - 编辑'));
const coopOptions = ref([]);
const ddlx     = ref("");
// 声明Emits
const emit = defineEmits(["success", "register"]);
//表单配置
const [registerForm, { resetFields, setFieldsValue, validate, updateSchema, clearValidate }] = useForm({
  labelWidth: 100,
  schemas: accountSchema,
  showActionButtonGroup: false
});

//表单赋值
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  //重置表单
  await resetFields();
  //setModalProps({ confirmLoading: false });
  //检查参数有效性
  isUpdate.value = unref(data?.isUpdate);
  ddlx.value = data.record.ddlx;
  if (unref(isUpdate) && data.record.id) {
    const account = await accountById({id : data.record.id});
    data.record = Object.assign(data.record, account);
    if (data.record.sflx == 1) {
      data.record.je = data.record.skje
      data.record.jePid = data.record.skjeFj
    } else if (data.record.sflx == 2) {
      data.record.je = data.record.fkje

      const coopPath = data.record.coopPath && data.record.coopPath.split(",")
      const arrays = coopPath <= 0 ? [] : coopPath.filter(item => item) //[366,381,382]//e
      data.record.cId = arrays;

      //data.record.cId = {0: '1000000000000000366', 1: '1000000000000000369', 2: '1000000000000000377'}
      //data.record.cId = ref(coopPath <= 0 ? [] : coopPath.filter(item => item));
      //data.record.cId = ['11000000000000000344', '11000000000000000020', '11000000000000000576']

      //data.record.cId = ref<string[]>(['1000000000000000345', '1000000000000000010', '1000000000000000155'])
      //data.record.cId = ref<string[]>(['zhejiang', 'hangzhou', 'xihu'])

      // console.info("data.record.cId--------------")
      // console.info(data.record.cId)
      // console.info(arrays)
    }
  }

  console.info("data.record@@customerNameSelect", data.customerNameSelect)

  coopOptions.value = await coopSelect()
  // 收支下拉选择数据
  updateSchema([
    {
      field: "bcId",
      componentProps: {
        options: data.customerNameSelect,
        label: 'customerDwmc',
        value: 'id',
        rowIndex: 'rowIndex',
        // 使用render函数自定义选项内容
        renderOption: (option) => {
          return h('div', { class: 'option-item' }, [
            h('span', { class: 'option-index' }, `${option.rowIndex || ''}.`),
            h('span', { class: 'option-text' }, option.customerDwmc)
          ]);
        }
      },
    },
    {
      field: "cId",
      componentProps: { options: coopOptions }
    },
    {
      field: "bankId",
      component: "JDictSelectTag",
      componentProps: {
        dictCode: "bank,djm,id@ddlxBank?ddlx=" + ddlx.value,
      },
    },
  ])

  // 无论新增还是编辑，都可以设置表单值
  //console.info("data.record@@", data.record.cId)
  if (typeof data.record === "object") {
    setFieldsValue({
      ...data.record
    });
  }

  await clearValidate();
});

//表单提交事件
async function handleSubmit() {
  try {
    const values = await validate();
    setModalProps({ confirmLoading: true });
    if (values.sflx == 1) {
      //收入
      values.skje = values.je
      values.fkje = 0
      values.fklx = ''
      values.coopId = null
      //挂账
      if (values.sffs == 3) {
        values.skjeFj  = values.jePid
        values.bankPid = values.bankId
      } else {
        values.skjeFj = 0
        values.bankPid = ''
      }
    } else if (values.sflx == 2) {
      values.fkje = values.je
      values.skje = 0
      //values.fklx = fklx // 不记得用来做什么的了
      values.bcId = null
    }
    //提交表单
    await accountSave(values).then((res) => {
      if (res.success) {
        //关闭弹窗
        closeModal();
        $message.success(res.message)
        //刷新列表
        emit("success", res.result);
      } else {
        $message.error(res.message)
      }
    });
  } finally {
    setModalProps({ confirmLoading: false });
  }
}
</script>

<style lang="less" scoped>
  .ant-input-number {
    width: 140px !important;
  }
  :deep(.ant-picker) {
    padding: 4px 5px 4px !important;
  }
  :deep(.ant-input-number .ant-input-number-input) {
    padding: 0 0px !important;
  }

  /* 下拉选项序号样式 - 使用:deep穿透scoped */
  :deep(.ant-select-item) {
    .option-item {
      display: flex;
      align-items: center;
      padding: 4px 12px;
    }
    .option-index {
      color: #666;
      font-weight: 500;
      width: 30px; /* 增加宽度确保序号显示完整 */
      text-align: right;
      margin-right: 8px;
    }
    .option-text {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  :deep(.ant-input-number .ant-input-number-input) {
    padding: 0 3px !important;
  }
  
  :deep(.ant-input-affix-wrapper) {
    padding: 0px !important;
  }
</style>
